<template>
    <div>
    <el-dialog title="挂号单打印" :visible.sync='dialogFormVisible2' :modal-append-to-body="false" :before-close="close">
        <div class="box" :data="changeForm">
            <div class="title" >
            
                <div> 常春藤公立医院</div>
            </div>
            <div class="sub">
                <div>姓名：{{changeForm.name}}</div>
                <div class="red">
                    三级甲等医院
                </div>
                <div>医疗卡号：{{changeForm.personsNo}}</div>
            </div>
            <div class="content">
                <div class="co1">
                     <div>门诊号：{{changeForm.id}}</div>
                      <div>门诊科室：{{changeForm.subjectName}}</div>
                </div>
                 <div class="co2">门诊一楼</div>
                    <div class="tiaoma">
                      <div></div>
                    <div></div>
                     <div></div>
                      <div></div>
                       <div></div>
                        <div></div>
                         <div></div>
                           <div></div>
                    <div></div>
                     <div></div>
                      <div></div>
                       <div></div>
                        <div></div>
                         <div></div>
                    </div>
            </div>
            <div class="circle">已 挂</div>
             <h2>预约中心电话:7899598</h2>
             <div class="foot">
                 <div>挂号时间:{{changeForm.treatDate}}</div>
                 <div>挂号费用:{{changeForm.registerMoney}}(￥)</div>
             </div>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="dayin" >确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
export default {
    name:'copy',
      props: ['dialogFormVisible2', 'changeForm'],
    data(){
        return{
       
        }
    },
    
      methods:{
          close(){
              this.$emit('close', false);
          },
          dayin(){
              this.$message('打印成功')
                this.$emit('close', false);
          }
      }
}
</script>
<style lang="less" scoped>
.el-dialog{
.box{
    border:1px solid black;
    width:100%;
}

.title{
    font-size: 20px;
    border-top:1px solid black;
    border-bottom:1px solid black;
   padding:5px 0;
    width:100%;
    display: flex;
    justify-content: center;
   
}
.sub{
    display: flex;
    justify-content: space-around;
     border-bottom:1px solid black;
     .red{
         color:red;    
        
     }
}
.content{
     display: flex;
    justify-content: space-around;
    padding:10px 0;
    .co1{
        div{
            padding:10px 0;
            font-size: 15px;
            font-weight: bold;
        }
    }
    .co2{
        font-size: 20px;
        padding:20px 0;
    }
    .tiaoma{
        padding:10px 0;
        display: flex;
        justify-content: space-around;
        div{
            width:2px;
            height:40px;
            border-left:2px solid black;
            border-right: 1px solid black;
        }
    }
}
h2{
    text-align: center;
    padding:10px 0;
}
.circle{
    position: absolute;
    right:20%;
    display:flex;
    justify-content: center;
    align-items: center;
            width:40px;
            height: 40px;
            line-height: 20px;
            padding: 20px;
            color:red;
            font-weight: bold;
            word-break: break-all;
            border-radius: 50%;
            letter-spacing:2px;
            text-align: center;
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 8px red, 0 0 0 25px #fff, 0 0 0 27px red, 0 0 0 32px #fff,0 0 0 34px #fac3a4;
            font-size: 22px;
            transform: rotate(-45deg);

}
.foot{
    border-top:1px solid black;
    display: flex;
    justify-content: space-between;
}
}

</style>


